<template>
  <div class="container">
    <uv-cell-group :border="false">
      <uv-cell title="姓名">
        <template v-slot:value>
          <uv-input placeholder="请输入姓名" border="none" v-model="model.realName" inputAlign="right"></uv-input>
        </template>
      </uv-cell>
      <uv-cell title="联系电话">
        <template v-slot:value>
          <uv-input placeholder="请输入联系电话" border="none" v-model="model.phone" inputAlign="right"></uv-input>
        </template>
      </uv-cell>
      <uv-cell title="所在地区" :value="model.address.province+model.address.city+model.address.district" :isLink="true" @click="instance.refs.provinceCityDistrictRef.open()"></uv-cell>
      <uv-cell title="详细地址">
        <template v-slot:value>
          <uv-input placeholder="请填写具体地址" border="none" v-model="model.detail" inputAlign="right">
            <template v-slot:suffix>
              <uv-icon name="map-fill" color="#E93323" @click="showAddressMap"></uv-icon>
            </template>
          </uv-input>
        </template>
      </uv-cell>
      <uv-cell title="默认地址" :border="false">
        <template v-slot:value>
          <uv-switch v-model="model.isDefault"></uv-switch>
        </template>
      </uv-cell>
    </uv-cell-group>

    <view class="actionBtn">
      <uv-button text="保 存" :loading="loading" shape="circle" color="#E93323" @click="save"></uv-button>
    </view>

    <provinceCityDistrict ref="provinceCityDistrictRef" @fatherMethods="getAddress"></provinceCityDistrict>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
import provinceCityDistrict from "@/packagePages/shoppingMall/components/provinceCityDistrict.vue";

let model = ref({
  detail: "",
  isDefault: false,
  phone: "",
  realName: "",
  address: {
    city: "",
    cityId: 0,
    district: "",
    province: "",
  },
});
let loading = ref(false);

onLoad((e) => {
  if (e.id) getInfo(e.id);
});

async function getInfo(id) {
  let resp = await proxy.$shopApis.addressDetail(id);
  model.value = proxy.$utils.formatFunction(resp, { ...model.value });
  model.value.address.province = resp.province;
  model.value.address.city = resp.city;
  model.value.address.district = resp.district;
  model.value.address.cityId = resp.cityId;
  model.value.id = id;
}

function getAddress(e) {
  model.value.address.province = e[0].name;
  model.value.address.city = e[1].name;
  model.value.address.district = e[2].name;
  model.value.address.cityId = e[2].cityId;
}

async function save() {
  if (!model.value.realName) return proxy.$utils.showToast("请填写姓名");
  if (!model.value.phone) return proxy.$utils.showToast("请填写联系电话");
  if (!proxy.$utils.isPoneAvailable(model.value.phone))
    return proxy.$utils.showToast("请输入正确的联系电话");
  if (!model.value.address.province)
    return proxy.$utils.showToast("请选择所在地区");
  if (!model.value.detail) return proxy.$utils.showToast("请填写详细地址");
  try {
    loading.value = true;
    await proxy.$shopApis.addressEdit(model.value);
    proxy.$utils.showToast("操作成功");
    counter.dataRefresh = true;
    setTimeout(() => {
      proxy.$utils.back();
    }, 1500);
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

async function showAddressMap() {
  let resp = await proxy.$auth.chooseLocation();
  model.value.detail = resp.address;
}
</script>


<style lang="scss">
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.container {
  padding: 15px;
  .uv-cell-group {
    background-color: white;
    border-radius: 10px;
  }
  .actionBtn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px 15px 25px 15px;
  }
}
</style>